<template>
  <div class="container">
    <el-table :data="estimateList" border class="table" ref="estimateTable">
      <el-table-column type="index" width="80" align="center"> </el-table-column>
      <el-table-column :prop="'v' + index" :label="item" align="center" v-for="(item, index) in estimateColumnList" :key="index">
        <template #default="scope">
          <div>{{ scope.row["v" + index] }}，-{{ scope.row["p" + index] }}元</div>
        </template>
      </el-table-column>
      <el-table-column prop="price" sortable label="最终估价" align="center"> </el-table-column>
    </el-table>
    <div class="footer-center">
      <el-button type="primary" @click="handleToDetail">返回到详情</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { IEstimate, RecycledGoodsDetailDTO } from "@/types/recoveryManage/recycledGoodsInfo";

interface Props {
  id: number;
  estimateList: IEstimate[];
  estimateColumnList: string[];
}
const { id, estimateList, estimateColumnList } = defineProps<Props>();

const emit = defineEmits<{
  handleInitData: [];
  handleSuccess: [];
  handleRefresh: [];
  handleToDetail: [];
}>();

const form = reactive<RecycledGoodsDetailDTO>({
  id: 0,
  category_id: "",
  goods_sn: "",
  name: "",
  price: "",
  image: "",
  on_sale: "",
  sort: 0,
  category_name: "",
  type: [],
  alias: []
});

watch(
  () => id,
  newValue => {
    if (newValue == 0) {
      /* 初始化数据 */
      handleInitData();
    } else {
      form.id = newValue;
    }
  }
);

/* 初始化数据 */
function handleInitData() {}

/* 查看估价 */
function handleToDetail() {
  emit("handleToDetail");
}
</script>

<style lang="scss" scoped>
/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}
</style>
